<template>
  <el-form label-width="auto" class="zw-table-search" ref="formRef" :model="form">
    <el-row :gutter="24" class="el_filter_row">
      <!-- 搜索 -->
      <el-col :span="12">
        <el-form-item label="海报搜索">
          <el-input v-model="form.poster_title" class="search_item" placeholder="请输入海报标题进行搜索" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="创建人">
          <el-select v-model="form.create_uid" placeholder="全部" multiple collapse-tags collapse-tags-tooltip>
            <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- 上传时间 -->
      <el-col :span="12">
        <el-form-item label="创建时间">
          <el-date-picker :editable="false" style="width: 97%" value-format="YYYY-MM-DD HH:mm:ss" v-model="timeArr" type="daterange" range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">查询</el-button>
          <el-button @click="resetForm(formRef)">清空</el-button>
          <el-button type="text" :icon="visible ? ArrowDownBold : ArrowUpBold" @click="pickUp">{{ visible ? '收起' : '展开' }}</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import type { ElForm } from 'element-plus'
  import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
  import { getSetionId, AFold } from '@/utils/utils'
  import { getCreateList } from '@/api/common'

  type FormInstance = InstanceType<typeof ElForm>
  const emit = defineEmits(['submit'])
  const DepartRef = ref(null)
  const formRef = ref<FormInstance>()
  const creators = ref([])
  const timeArr = ref([]) //时间容器
  const form = ref({
    start_time: '', //开始时间
    end_time: '', //结束时间
    create_uid: [], //创建人
    poster_title: '' //海报标题
  })
  // 初始化筛选条件
  const initForm = () => {
    timeArr.value = []
    form.value = {
      start_time: '', //开始时间
      end_time: '', //结束时间
      create_uid: [], //创建人
      poster_title: '' //海报标题
    }
  }
  const visible = ref(true)
  const pickUp = () => {
    visible.value = !visible.value
    AFold(visible.value, '.el_filter_row')
    emit('getTableH')
  }
  //获取创建人列表
  const getCreator = async() => {
    const res = await getCreateList({})
    res.map((item: any) => {
      item.name = `${item.name}(${item.phone})`
    })
    creators.value = res
  }
  // 提交查询
  const submitForm = (formEl: FormInstance | undefined) => {
    if (timeArr.value.length > 0) {
      form.value.start_time = timeArr.value[0]
      form.value.end_time = timeArr.value[1]
    } else {
      form.value.start_time = ''
      form.value.end_time = ''
    }
    emit('submit', form.value)
  }
  const beginDateBefore = (item: any) => {
    let beginDate: string = form.value.end_time
    if (beginDate) {
      return Date.parse(item) > Date.parse(beginDate)
    }
  }
  const beginDateAfter = (item: any) => {
    let beginDate: string = form.value.start_time
    if (beginDate) {
      return Date.parse(item) < Date.parse(beginDate)
    }
  }
  //重置
  const resetForm = (formEl: FormInstance | undefined) => {
    // formEl?.resetFields()
    initForm()
    emit('submit', form.value)
  }
  onMounted(() => {
    getCreator()
  })
  defineExpose({ resetForm })
</script>

<style lang="scss">
  .zw-table-search {
    padding: 16px;
    background-color: #f9f9f9;
  }
</style>
